<template>
  <div class="app-container">
    <lottery ref="lotteryRef" @init="initDialog" @end="initDialog" />

    <el-dialog
      v-model="dialogVisible"
      width="800"
      :close-on-click-modal="false"
      :before-close="handleClose"
      align-center
    >
      <div class="_content">
        <img class="_img" :src="positionImg" alt="" />
        <div style="color: #999; margin: 20px 0; font-size: 20px">{{ areaName }}</div>
        <div style="color: #000; font-size: 20px">{{ positionName }}</div></div
      >
    </el-dialog>
  </div>
</template>

<script setup>
import { getLotteryApi } from '@/api/lottery'
import lottery from './components/lottery.vue'

const dialogVisible = ref(false)
const positionName = ref('')
const areaName = ref('')
const positionImg = ref('')
const lotteryRef = ref()
function handleClose() {
  lotteryRef.value.getList()
  dialogVisible.value = false
}
function initDialog() {
  dialogVisible.value = true
  getLotteryApi().then((res) => {
    console.log(res)
    positionImg.value = res.data.positionImg
    areaName.value = res.data.areaName
    positionName.value = res.data.positionName
  })
}
</script>

<style lang="scss" scoped>
.app-container {
  margin: 0;
  padding: 0;
  ._img {
    width: 600px;
    height: 400px;
  }
  ._content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
:deep(.el-dialog:not(.is-fullscreen)) {
  margin-top: 30vh !important;
}
</style>
